<template>
  <!-- {{ chartType }} -->
  <BaseCharts ref="baseChartsRef"
              :options="options"
              autoRander
              :autoNumber="autoNumber"
              @legendselectchanged="legendselectchanged"></BaseCharts>
</template>

<script setup>
import BaseCharts from "@/components/echarts/vpt-base-chart/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { onMounted, nextTick, ref, watch } from "vue";
import { getChartTootipFormatter } from "@/utils/formatter.js";
import { useEchart } from "@/hooks/useEchart.js";

const props = defineProps({
  chartType: { type: String, default: "init" },
  chartData: { type: Array, default: () => [] },
  // 横坐标数据
  xAxisData: { type: Array, default: () => [] },
  // 纵坐标数据
  yAxisData: { type: Array, default: () => [] },
  // y轴配置项
  yAxisProps: { type: Object, default: () => [] },
  // 图例数据
  legendData: { type: Array, default: () => [] },
  // 内边距
  grid: { type: Object, default: () => ({}) },
  // 柱子颜色
  color: { type: Array, default: () => [] },
  // 循环渲染
  autoRander: { type: Boolean, default: false },
  // 循环渲染间隔 单位S
  autoNumber: { type: Number, default: 60 },
  // 标题配置项
  titleProps: { type: Object, default: () => ({}) },
  // 图例
  legend: { type: Object, default: () => ({}) },
  // 滚动条配置
  dataZoom: { type: Object, default: () => ({}) },
  showLegend: { type: Boolean, default: true },
});

const baseChartsRef = ref(null);
const fontColor = "rgba(29, 33, 41, 1)";
const options = ref({});
useEchart(getOptions);

watch(
  () => ({
    chartData: props.chartData,
    chartType: props.chartType,
    // legendData: props.legendData,
    yAxisData: props.yAxisData,
  }),
  () => {
    // getOptions();
    nextTick(async () => {
      if (props.chartType == "update") {
        updateSeries();
      } else {
        getOptions();
      }
    });
  },
  { deep: true }
);

// 切换折线图legend后，保持之前的选中状态
// @param {Object} event
let legendSelect = ref({});
const legendselectchanged = (event) => {
  legendSelect.value = event.selected;
  updateSeries();
};
function getOptions () {
  options.value = {
    animation: false,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      // borderColor: "transparent",
      // backgroundColor: "#0d1635cc",
      borderColor: "#fff",
      // extraCssText:
      //   "background: linear-gradient(180deg, #19406B, rgba(0, 134, 205, 0.91))", //渐变颜色
      formatter: (item) => {
        return getChartTootipFormatter(item);
      },
      // textStyle: {
      //   fontSize:fontSize(10)
      // }
    },
    title: {
      text: "",
      textStyle: {
        color: "#fff",
        fontWeight: 400,
        // fontFamily: "PingFangSC-Medium",
        fontSize: fontSize(28),
      },
      ...props.titleProps,
    },
    legend: {
      show: props.showLegend,
      top: 0,
      left: "left",
      itemWidth: fontSize(12),
      itemHeight: fontSize(12),
      textStyle: {
        color: "#fff",
        fontSize: fontSize(12),
      },
    },
    grid: {
      left: fontSize(0),
      right: fontSize(40),
      bottom: fontSize(0),
      top: fontSize(5),
      containLabel: true,
      ...props.grid,
    },
    xAxis: {
      type: "value",
      // maxInterval: 20,
      // splitNumber: 10,
      axisLabel: {
        show: true,
        color: fontColor,
        fontWeight: 400,
        fontSize: fontSize(14),
        // fontFamily: "PingFangSC-Medium",
        // interval: 20,
        // formatter: function (value) {
        //   if (value != 0) {
        //     return value + " 天";
        //   }
        //   return value;
        // },
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true, // 是否显示网格线
        lineStyle: { // 网格线的样式
          color: '#f3f4f5', // 颜色
          type: 'dashed' // 类型
        }
      },
    },
    yAxis: {
      type: "category",
      data: props.yAxisData,
      // splitNumber: 4,
      axisLabel: {
        show: true,
        color: fontColor,
        fontWeight: 400,
        fontSize: fontSize(12),
        // fontFamily: "PingFangSC-Medium",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false
      },
      nameTextStyle: {
        // fontSize: fontSize(14),
        // color: fontColor,
        // fontFamily: "PingFangSC-Medium",
        // fontWeight: 400,
      },
      ...props.yAxisProps,
    },
    series: props.chartData.map((item, index) => {
      return {
        name: '数量',
        type: "bar",
        data: item,
        color: '#2175DB',
        barWidth: fontSize(14),
        label: {
          show: true,
          fontSize: fontSize(12),
        },
      };
    }),

  };
}

async function updateSeries () {
  try {
    const chartInstance = await getEchartsInstance();
    if (chartInstance) {
      const newChartOption = chartInstance.getOption();
      // 遍历 series 更新 data
      newChartOption.series = newChartOption.series.map((series, index) => ({
        ...series,
        data: props.chartData[index].data,
        name: props.chartData[index].name,
      }));

      newChartOption.yAxis[0].data = props.yAxisData;
      newChartOption.legend[0].selected = legendSelect.value;
      // 更新 series 部分
      chartInstance.setOption(newChartOption, false);
    }
  } catch (error) {
    // console.error("Failed to update chart:", error);
  }
}

function getEchartsInstance () {
  return new Promise((resolve) => {
    baseChartsRef.value.commonFunc((instance) => resolve(instance));
  });
}

defineExpose({
  reloadEchart: () => {
    baseChartsRef.value.reloadEchart();
  },
});
</script>